<template>
  <div>
    <!--  头部-->
    <div class="breadcrumb-area pt-95 pb-95 bg-img" style="background-image:url(static/picture/banner-2.jpg);">
      <div class="container">
        <div class="breadcrumb-content text-center"><h2>Shop Page</h2>
          <ul>
            <li>
              <a href="index.html">home</a></li>

            <li class="active">MyAccount</li>

          </ul>
        </div>
      </div>
    </div>
    <!--  头部-->
    <div class="shop-area pt-100 pb-100 gray-bg">
      <div class="container">
        <div class="row flex-row-reverse">

          <div class="col-lg-10">
            <div class="mt-50">
              <!--         我的个人主页界面     -->
              <div v-show="cur===0">
                <div class="row">
                  <div class="col-md-4">
                    <div class="single-food-category-2 text-center mb-60">
                      <div class="single-food-hover">
                        <img :src="user.aImage" alt="" style="width: 180px;height: 180px">
                      </div>
                      <h3></h3>
                    </div>

                    <h3> {{ user.username }}</h3>
                  </div>
                  <div class="col-md-8">
                    <div class="panel panel-default">
                      <div class="panel-heading">
                        <h5 class="panel-title">
                          <span>1</span>
                          <a data-toggle="collapse"
                             data-parent="#faq"
                             href="#payment-1"
                             aria-expanded="true" class="">
                            Change Loginfo</a>
                        </h5>
                      </div>
                      <div id="payment-1" class="panel-collapse collapse show" style="">
                        <div class="panel-body">
                          <div class="row">
                            <div class="col-lg-6 col-md-12">
                              <div class="checkout-register">
                                <h5 class="checkout-sub-title">Change Bending Phone</h5>
                                <p>Please enter your phone to bend on your account</p>
                                <form>
                                  <label>Phone Number</label>
                                  <input type="text" v-model="user.phone" @blur="checkPhoneExist">
                                  <a v-if="phoneExist" class="text-danger">Has Already bended</a>
                                  <row>
                                  <input type="text" style="width: 260px" placeholder="CacheCode" v-if="bendByPhone" v-model="cacheCode">
                                    <button  class="btn btn-primary btn-lg" :disabled ="canGet" v-if="sendCode"  role="button" aria-pressed="true" @click="sendVerificate">
                                      <span>{{ btnText }}</span>
                                    </button>
                                  </row>
                                  <button class="checkout-btn" v-if="checkBtn" @click="checkVerificate">
                                    Confirm
                                  </button>
                                </form>
                              </div>
                            </div>
                            <div class="col-lg-6 col-md-12">
                              <div class="checkout-login">
                                <h5 class="checkout-sub-title">Change your Loginfo</h5>
                                <form>
                                  <input type="text" id="username" placeholder="Username" v-model="user.username"
                                         @blur="checkUsername">
                                  <a v-if="usernameExist" class="text-danger">Has Already registered</a>
                                  <input id="email" placeholder="Email" type="email" v-model="user.email" >
                                  <a v-if="emailExist" class="text-danger">Has Already registered</a>
                                </form>
                                <p></p>
                                <div class="login-forget">
                                  <button class="checkout-btn" type="submit"  @click="changeAccount">Confirm</button>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="panel panel-default">
                        <div class="panel-heading"><h5 class="panel-title"><span>2</span>
                          <a data-toggle="collapse" data-parent="#faq" href="#payment-2" class="" aria-expanded="true">
                            Change Default address
                          </a>
                        </h5>
                        </div>

                        <div id="payment-2" class="panel-collapse collapse show" style="">
                          <div class="panel-body">
                            <div class="billing-information-wrapper">
                              <div class="row">
                                <div class="col-lg-6 col-md-6">
                                  <div class="billing-info">
                                    <label>
                                      Buyer Name
                                    </label>
                                    <input type="text" id="firstName" value="firstName" v-model="user.realname">
                                  </div>
                                </div>

                                <div class="col-lg-6 col-md-6">
                                  <div class="billing-select card-mrg">
                                    <label>Country</label>
                                    <select v-model="user.country">
                                      <option value="China">China</option>
                                      <option disabled="disabled" value="America" selected="selected">
                                        America(unsupported temporarily)
                                      </option>
                                      <option disabled="disabled" value="England">
                                        England(unsupported temporarily)
                                      </option>
                                      <option disabled="disabled" value="Germany">
                                        Germany(unsupported temporarily)
                                      </option>
                                    </select>
                                  </div>
                                </div>

                                <div class="col-lg-7 col-md-6">
                                  <div class="billing-info" style="height: 10px;">
                                    <label>Address</label></div>
                                  <v-region @values="regionChange"></v-region>
                                </div>

                                <div class="col-lg-5 col-md-6">
                                  <div class="billing-info"><label>Detailed
                                    Address</label>
                                    <input type="text" id="shippingAddress" v-model="user.address1" value="shippingAddress"></div>
                                </div>

                                <div class="col-lg-6 col-md-6">
                                  <div class="billing-info">
                                    <label>Telephone</label>
                                    <input type="text" id="phone" v-model="user.phone" value="phone">
                                  </div>
                                </div>
                                <div class="col-lg-6 col-md-8">
                                  <p></p>
                                  <button class="checkout-btn" type="submit" @click="changeAddress">Confirm</button>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>


              </div>
              <!--              收藏夹-->
              <div v-show="cur==3">

                <row>
                  <h3 v-if="collectmsg">{{collectIsNull}}</h3>
                  <router-link :to="{name:'viewProduct',query:{productId:'K9-BD-01'}}">
                    <div v-if="collectmsg" class="button-box">
                      <button>
                        Go to
                      </button>
                    </div>

                  </router-link>



                  <div class=" col-lg-3 col-xl-4 col-md-3 col-sm-3"  v-for="collect in collectList">


                    <div class="product-wrapper mb-10">
                      <div class="product-img">
                        <router-link :to="{name:'viewItem',query:{itemId:collect.itemId,productId:collect.productId,catId:collect.categoryId}}">
                          <img :src="collect.iImage" alt="">
                        </router-link>
                        <div class="product-action-wishlist">
                          <a title="Wishlist" @click="cancelCollect(collect.itemId)">
                            <i class="ti-heart"></i>
                          </a>
                        </div>
                      </div>
                      <router-link :to="{name:'viewItem',query:{itemId:collect.itemId,productId:collect.productId,catId:collect.categoryId}}">
                      <div class="product-content" >
                        <h4>
                          <a v-model="cancelItem">{{ collect.itemId }}</a>
                        </h4>
                        <div class="product-price">
                          <span class="new">{{ collect.listPrice }}</span>
                        </div>
                      </div>
                      </router-link>
                    </div>
                  </div>
                </row>

              </div>

              <div v-show="cur==4">
                <div v-if="commentNum == 0">No comment for now.</div>
                    <div class="order-review-wrapper">
                      <div class="order-review">
                          <div class="rattings-wrapper" v-for="comment in commentList">
                            <div class="sin-rattings">
                              <div class="star-author-all">
                                <div class="product-rating">
                                  {{comment.itemId}}
                                </div>
                                <div class="ratting-author f-right">
                                  <h3>{{comment.username}}</h3><span>{{comment.commentTime}}</span>
                                </div>
                              </div>
                              <p>{{comment.content}}</p>
                            </div>
                            <hr/>
                          </div>
                      </div>
                    </div>
              </div>
            </div>
          </div>
          <div class="col-lg-2">
            <div class="shop-sidebar">
              <div class="shop-widget mt-50">
                <li class="shop-sidebar-title">
                  <h3>My Account</h3>
                </li>
                <div class="shop-list-style mt-20 text-left">
                  <ul>

                    <li>
                      <a @click="cur=0"><h4>My Information</h4></a>
                    </li>
                    <li>
                      <router-link to="/order/viewOrders">
                        <a @click="cur=1"><h4>My Order</h4>
                        </a></router-link>
                    </li>
                    <li>
                      <router-link to="/cart/cart">
                        <a @click="cur=2">
                          <h4>My Cart</h4>
                        </a>
                      </router-link>
                    </li>
                    <li>
                      <a @click="cur=3"><h4>My Like</h4></a>
                    </li>
                    <li>
                      <a @click="cur=4"><h4>My Comment</h4></a>
                    </li>

                    <li @click="logOut">
                      <router-link to="/user/user" >
                      <a ><h4>Log Out</h4></a>
                      </router-link>
                    </li>

                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="modal fade" id="myModal" v-if="messageBox" >
      <div class="modal-dialog">
        <div class="modal-content">

          <!-- 模态框头部 -->
          <div class="modal-header">
            <h4 class="modal-title">Attention</h4>
            <button type="button" class="close" data-dismiss="modal">&times;</button>
          </div>

          <!-- 模态框主体 -->
          <div class="modal-body">
            <h3>{{message}}</h3>
          </div>

          <!-- 模态框底部 -->
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">I know</button>
          </div>

        </div>
      </div>
    </div>

  </div>
</template>

<script>
import myAccount from "../../../static/js/pet/myaccount";

export default {
  ...myAccount
}
</script>

<style scoped>
@import "../../../static/css/bootstrap.min.css";
@import "../../../static/css/animate.css";
@import "../../../static/css/simple-line-icons.css";
@import "../../../static/css/themify-icons.css";
@import "../../../static/css/owl.carousel.min.css";
@import "../../../static/css/slick.css";
@import "../../../static/css/meanmenu.min.css";
@import "../../../static/css/style2.css";

@import "../../../static/css/responsive.css";
</style>
